<!--#3-->
<template lang="html">
  <table class="mui-table mui-table--bordered">
    <thead>
      <tr>
        <td colspan="colsCount">
          <input type="checkbox" name="" value="">
        </td>
      </tr>

      <tr>
        <th v-if="store.multiSelect" >
          <span @click="checkAll" v-text="store.allChecked?'√':'-'">
          </span>
        </th>

        <th width="100px" v-for="(col,index) in store.columns"  >
          {{col.title}} <span v-if="col.sortable"
          @click="sort(index)">^</span> </th>
        <th v-if="store.rowOps" ></th>

      </tr>


    </thead>
    <tbody>

        <tr  @click.self="selectRow(index)" v-for="(row,index) in store.rows">
          <td v-if="store.multiSelect" >
            <span v-text="store.checkedList[index]?'√':'-'" @click="checkRow(index)"></span>

          </td>
          <td v-if="store.showInfo" colspan="store.columns.length"
            v-html="store.getInfo(row,index)"
          ></td>
          <td v-for="col in store.columns" width="100px" v-else>
            <div class="" v-if="col.render"
             v-html="col.render(row,index)">
            </div>
            <div class="" v-else
             v-html="row[col.key]">
            </div>

        </td>
        <td width="100px" v-if="store.rowOps">
          <button type="button" v-for="op in store.rowOps"
           @click="op.func(row,index)">{{op.title}}</button>
         </td>

          </tr>

    </tbody>
    <tfoot>
      <tr>
        <td colspan="colsCount"></td>
      </tr>
      <tr v-if="pagable">
        <td :colspan="colsCount-1" v-html=""></td>
        <td> 转到<input type="text" name="" v-model="store.pgNo" @change="pgChanged"></td>


      </tr>

    </tfoot>
  </table>

</template>

<style lang="css">
td:{
  padding: 5px 5px 5px 5px;
}
</style>


<script>
import form from "../utils/form";

export default {
  data(){
    return {
      store:this.initConfig
    }
  },
  props:[
    "initConfig"
  ],
  computed:{
    colsCount(){
      return this.store.columns.length +
      (this.store.rowOps.length>0?1:0) +
      (this.store.multiSelect?1:0)

    }
  },
  mounted(){
    let vm = this;
    vm.$nextTick(function(){
      // ***
      vm.load(function(){
        for(let i=0; i<vm.store.rows.length;i++){
          vm.store.checkedList.push(false);
        }

      })


    })
  },
  // methods 是通用的表格操作：单选、多选、排序
  methods:{
    pgChanged(){
      console.log(this.store.pgNo);

    },

    selectRow(i){
      this.store.currentRow = Object.assign({},this.store.rows[i]);
      this.store.currentSeq = i;
    },
    checkAll(){
      this.store.allChecked = !this.store.allChecked;
      if(this.store.allChecked){
        for(let i=0; i<this.store.checkedList.length;i++){
          if(!this.store.checkedList[i]){
            this.store.checkedList.splice(i,1,true);
          }
        }
      }else{
        for(let i=0; i<this.store.checkedList.length;i++){
          if(this.store.checkedList[i]){
            this.store.checkedList.splice(i,1,false);
          }
        }

      }
      console.log(this.store.checkedList);
    },
    checkRow(i){

      if(this.store.checkedList[i]){
        this.store.checkedList.splice(i,1,false);
        this.allChecked = false;

      }else{
        this.store.checkedList.splice(i,1,true);
        let t = true;
        for(let i=0; i<this.store.checkedList.length;i++){
          if(!this.store.checkedList[i]){
            this.store.allChecked = false;
            t = false;
            break;

          }
        }
        if(t){
          this.store.allChecked = true;
        }

      }
      console.log(this.store.checkedList);


    },
    sort(i){
      let vm = this;
      vm.store.columns[i].direction = !vm.store.columns[i].direction;
      vm.store.rows.sort(function(a,b){
        return vm.store.columns[i].direction?a[i]>b[i]:a[i]<b[i];
      });
    },
    load(after){
      let vm = this;
      let action = vm.store.getUrl + "?pgsize=" +
        vm.store.pgSize +
        "&start=" +
        (vm.store.pgNo - 1) * vm.store.pgSize +
        "&pattern=" +
        encodeURIComponent(vm.store.pattern);

      form({}, "GET", action, {
        func: function(xhr) {
          let result = xhr.responseText;
          console.log(result);

          if (result.length < 10) {
            alert("append failed");
          } else {
            result = JSON.parse(result);
            if(result.length<1) return;

            vm.store.rows.length = 0;
            for(let a of result){
              vm.store.rows.push(a);
            }
            console.log(vm.store);
            if(after) after();
          }
        }
      });

    }
  }
}
</script>
